<template>
  <el-drawer :visible.sync="drawer" direction="rtl" size="50%" :with-header="false" :width="700">
      <div class="drawer_box">
          <div class="drawer_title">
              <div class="drawer_t">
                  <div class="drawer_t_l">
                      <img class="drawer_t_l_img"
                          src="../../../../../static/skin/herodoo/main/platform/home/img/piliangoumai.png" alt="" />
                      取消订单
                  </div>
                  <img class="drawer_t_r" src="../../../../../static/skin/herodoo/main/platform/home/img/guanbi.png"
                      alt="" @click="drawer = false" />
              </div>
          </div>
          <div class="drawer_content">
              <div class="content-box">
                  <div class="label">权益名称：</div>
                  <div class="desc name" @click="handleShowDetail">{{ messageList.NAME }}</div>
              </div>
              <div class="content-box">
                  <div class="label">购买数量：</div>
                  <div class="desc">{{ messageList.Quantity }}</div>
              </div>
              <div class="content-box">
                  <div class="label">购买金额(元)：</div>
                  <div class="desc">{{ messageList.TotalPrice }}</div>
              </div>
              <div class="content-box">
                  <div class="label">下单时间：</div>
                  <div class="desc">{{ messageList.CreateTime }}</div>
              </div>
              <div class="content-box">
                  <div class="label">退款数量：</div>
                  <el-input-number v-model="num" @change="handleChange" :min="1" :max="messageList.Quantity" label="购买数量"></el-input-number>
              </div>
              <div class="content-box">
                  <div class="label">退款金额：</div>
                  <div class="desc">{{ refundMoney }}</div>
              </div>
              <!-- <div class="content-box">
                  <div class="label">退款规则：</div>
                  <div class="desc">{{ "111111" }}</div>
              </div> -->
              <div class="content-box align-start">
                  <div class="label">请选择售后原因：</div>
                  <div class="desc desc-radio">
                    <el-radio class="radio" v-model="saleValue" label="0">运力不足，无法派车</el-radio>
                    <el-radio class="radio" v-model="saleValue" label="1">突发情况</el-radio>
                    <el-radio class="radio" v-model="saleValue" label="2">
                      <div>
                        <div>其他</div>
                        <el-input
                          type="textarea"
                          :autosize="{ minRows: 4, maxRows: 6}"
                          placeholder="请输入退款原因"
                          v-model="textarea">
                        </el-input>
                      </div>
                    </el-radio>
                  </div>
              </div>
          </div>
      </div>
      <div class="drawer_footer">
          <div class="footer-btn" @click="handleCancelOrder">确认</div>
      </div>
  </el-drawer>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
      messageList: {
          type: Object,
          default: {},
      },
      octopus: {
        type: Object,
        default: {},
      }
  },
  data() {
      return {
          drawer: false,
          num: 1,
          refundMoney: 0,
          textarea: '',
          saleValue: '0',
          textarea: '',
      };
  },
  computed: {
    refundNumber() {
      return 1
    }
  },
  watch: {
    drawer: {
      handler(v) {
        if(v) {
          this.num = this.messageList.Quantity
          this.refundMoney = this.messageList.TotalPrice
          this.getRefundList()
        }
      }
    }
  },
  methods: {
    drawerOp() {
      this.drawer = true;
    },
    // 跳转权益详情
    handleShowDetail() {
      this.$emit('drawerUpDetail')
    },
    handleChange(value) {
      this.refundMoney = this.messageList.CostPrice * value
    },

    handleCancelOrder() {
      if(this.saleValue == 2 &&  !this.textarea.trim()) {
        this.$message.error('请输入退款原因')
        return
      }
      let Status = 4
      if(this.octopus.passport.authorization.company != 1) {
        Status = 6
      }
      this.$confirm('此操作将取消该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // this.octopus.request.api.post("/ESB/Services/Tools/Data/Get", {
        //     requestType: "POST_JSON", // POST_JSON
        //     url: "http://wxzf001.natapp1.cc/ESB/AIGC/Purchase/Cancel",
        //     params: {
        //         PayCode: this.messageList.Code,
        //         TypeID: 20, // 10 用户取消 20 商户取消
        //         UserID: this.octopus.passport.id,
        //     }
        // }, (apiData) => {
        //     if (apiData.content.response.status.code == 200) {
        //         this.$message.success("取消订单成功")
        //         this.drawer = false
        //     } else {
        //         this.octopus.tips.error(apiData.content.response.content)
        //     }
        // })
        // /ESB/AIGC/Trade/CancelOrder
        this.octopus.tools.openAPI("/ESB/AIGC/Purchase/Cancel", {
          // Code: this.messageList.Code,
          PayCode: this.messageList.Code,
          // TypeID: 10,
          TypeID: 20, // 10 用户取消 20 商户取消
          UserID: this.octopus.passport.id,
        }, (data) => {
          if (data.status.code == 200) {
            this.$message.success("取消订单成功")
            this.drawer = false
          } else {
            this.octopus.tips.error(data.status.message);
          }
        })


      })
    },
    generateRandomString(length) {
      let result = '';
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      for (let i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * characters.length));
      }
      return result;
    }
  },
};
</script>
<style scoped>
.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 8rem);
  display: flex;
  flex-direction: column;
}

.drawer_title {
  box-shadow: 0px 5px 5px rgb(230 228 228 / 30%);
  padding-bottom: 1rem;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.drawer_content {
  overflow-y: auto;
  margin-top: 1.5rem;
  height: calc(100vh - 13rem);
  padding: 0 3rem;
  width: 100%;
  padding-bottom: 1rem;
}

.drawer_content .title {
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_content .title2 {
  font-size: 1.8rem;
}

.drawer_content .driver-title {
  margin-top: 1em;
}

.content-box {
  display: flex;
  align-items: center;
  margin: 2rem 0 2rem 2em;
}

.align-start {
  align-items: flex-start;
}

.content-box .label {
  width: 25%;
}

.content-box .label .label-bold {
  font-size: 1.8rem;
  font-weight: bold;
}

.content-box .desc {
  /* flex: 1; */
  display: flex;
  flex-direction: row;
  align-items: center;
}
.content-box .desc-radio {
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
}

.name {
  color: #288ffd;
  text-decoration: underline;
  cursor: pointer;
}
.drawer_footer {
    display: flex;
    justify-content: flex-end;
    align-content: center;
}
.drawer_footer .footer-btn {
    line-height: 4rem;
    background-color: #F78C51;
    color: #fff;
    margin: 0 1rem;
    padding: 0 3rem;
    border-radius: .5rem;
    cursor: pointer;
}
>>>.el-input-number {
  line-height: 18px;
}
>>>.el-input__inner {
  height: 20px;
}
.radio {
  width: 100%;
  display: flex;
  margin: 6px 0;
}
>>>.el-radio__label {
  width: 100%;
  font-size: 1.6rem
}
>>>.el-textarea {
  margin-top: 4px;
  font-size: 1.6rem;
}
</style>